<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/MasterPage.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<Animoso.Domain.Administration>>" %>
<%@ Import Namespace="Animoso.Domain" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	Index
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<%
    var commissions = (IEnumerable<Commission>) ViewData["commissions"]; %>
<h4>Commissies</h4>
<p>
        <a href="#" id="newCommissionButton">Nieuwe commissie</a>
        <div id="newCommission" style="visibility: hidden;">
            Naam: <input type="text" id="name"  /> <input type="button" value="OK" id="okButton" />
        </div>
    </p>
 <fieldset>
    <table id="commissions">
    <% foreach (var commission in commissions)
    {
           %>
        <tr id="commission_<%=commission.Id %>">
            <td><b><%=commission.Name %></b></td>            
            <td><a id="edit_<%=commission.Id %>" class="editCommission" href="#"><img src="Content/Images/Text-Edit-icon.png" /></a></td>
            <td><a id="delete_<%=commission.Id %>" class="deleteCommission" href="#"><img src="Content/Images/File-Delete-icon.png" /></a></td>
        </tr>
    <% } %>        
    </table>
 </fieldset> 
 
 <h4>Bestuur</h4>
 <fieldset>
    <table>
    <% foreach (var administration in Model)
    {
        string startDate = administration.StartDate.ToShortDateString();
        string endDate = "???";
        if (administration.EndDate.HasValue)
            endDate = administration.EndDate.Value.ToShortDateString();
           %>
        <tr id="administration_<%=administration.Id %>">
            <td><b>Bestuur <%=startDate %>   -   <%=endDate %></b></td>            
            <td><a href="#"><img src="Content/Images/Text-Edit-icon.png" /></a></td>
            <td><a href="#"><img src="Content/Images/File-Delete-icon.png" /></a></td>
        </tr>
    <% } %>        
    </table>
 </fieldset> 

    <p>
        <%= Html.ActionLink("Nieuw bestuur", "Create") %>
    </p>
    
    <script type="text/javascript">
        bindButtons();
        function bindButtons() {
            $('.editCommission').click(function(event) {
                var commissionId = this.id.split('_')[1];

                $.ajax({ url: "ManageAdministration/GetCommissionName", data: "commissionId=" + commissionId, context: document.body,
                    success: function(val) {
                        $('#commission_' + commissionId).empty();
                        $('#commission_' + commissionId).append('<td><input id="name_' + commissionId + '" type="text" value="' + val + '"/><input type="button" value="OK" class="okButton" id="ok_' + commissionId + '" /></td>');
                        bindOkButton();
                    }
                });
            });

            $('.deleteCommission').click(function(event) {
                var commissionId = this.id.split('_')[1];
                $.ajax({ url: "ManageAdministration/DeleteCommission", data: "commissionId=" + commissionId, context: document.body,
                    success: function(val) {
                        if (val) {
                            $('#commission_' + commissionId).remove();
                        }
                    }
                });
            });
        }

        function bindOkButton() {
            $('.okButton').click(function(event) {
                var commissionId = this.id.split('_')[1];
                if ($('#name_' + commissionId).val()) {
                    var name = $('#name_' + commissionId).val();
                    $.ajax({ url: "ManageAdministration/SetCommissionName", data: ({ commissionId: commissionId, name: name }), context: document.body,
                        success: function(val) {
                            $('#commission_' + commissionId).empty();
                            $('#commission_' + commissionId).append('<td><b>' + val.Name + '</b></td><td><a id="edit_' + val.Id + '" class="editCommission" href="#"><img src="Content/Images/Text-Edit-icon.png" /></a></td><td><a id="delete_' + val.Id + '" class="deleteCommission" href="#"><img src="Content/Images/File-Delete-icon.png" /></a></td>');
                            bindButtons();
                        }
                    });
                }
                else {
                    $('#name_' + commissionId).css('background-color', 'red');
                }
            });
        }

        $("#newCommissionButton").click(function() {
            $("#newCommission").css("visibility", "visible");
        });

        $("#okButton").click(function() {
            var name = $("#name").val();
            $.ajax({ url: "ManageAdministration/AddCommission", data: "name=" + name, context: document.body,
                success: function(val) {
                    $('<tr id="commission_' + val.Id + '"><td><b>' + val.Name + '</b></td><td><a id="edit_' + val.Id + '" class="editCommission" href="#"><img src="Content/Images/Text-Edit-icon.png" /></a></td><td><a id="delete_' + val.Id + '" class="deleteCommission" href="#"><img src="Content/Images/File-Delete-icon.png" /></a></td></tr>').appendTo("#commissions");
                    //$('#commissions tr:last').after();
                    bindButtons();
                    $("#newCommission").css("visibility", "hidden");
                }
            });
        });             
             
    </script>

</asp:Content>

